import React, { useCallback, useEffect } from 'react';
import { Badge, Button, Swiper, Tag, Toast } from 'antd-mobile';
import NavBar from '@/components/NavBar/NavBar';
import { useNavigate, useParams } from 'react-router-dom';
import { useEnhanceDispatch, useEnhanceSelector } from '@/hooks';
import { changeMedicineDetailQuantity, findMedicineDetail, setMedicines } from '@/store/modules/consultStore';
import SubmitBar from '@/components/SubmitBar/SubmitBar';
import SvgIcon from '@/components/SvgIcon/SvgIcon';
import './MedicineDetail.scss';

const MedicineDetail = () => {
  const navigate = useNavigate();
  const { id } = useParams();
  const enhanceDispatch = useEnhanceDispatch();
  const medicineDetail = useEnhanceSelector(state => state.consultStore.medicineDetail);
  // 左边插槽内容
  const left = useCallback(() => (<span>返回</span>), []);
  // 中间插槽内容
  const children = useCallback(() => (<span>{medicineDetail.name}</span>), []);

  /**
   * @description 获取药品详情的回调函数
   * */
  const findMedicine = async () => {
    try {
      await enhanceDispatch(findMedicineDetail(id as string)).unwrap();
    } catch (rejectedValueOrSerializedError: any) {
      Toast.show(rejectedValueOrSerializedError);
    }
  };

  const addtoCart = () => {
    enhanceDispatch(changeMedicineDetailQuantity());
    enhanceDispatch(setMedicines([{ id: medicineDetail.id, quantity: Number(medicineDetail.quantity) }]));
  };

  const renderPrice = () => {
    return (
      <>
        <Badge content={medicineDetail.quantity}>
          <div className="restoratives">
            <SvgIcon name="restoratives" width="25px" height="25px"></SvgIcon>
          </div>
        </Badge>
        <span className="price">￥{Number(medicineDetail.amount).toFixed(2)}</span>
      </>
    );
  };

  useEffect(() => {
    findMedicine();
  }, []);

  return (
    <div className="medicine-detail">
      {/*导航栏组件*/}
      <NavBar onBack={() => navigate(-1)} back={left()} children={children()}></NavBar>
      <Swiper>
        {
          medicineDetail?.mainPictures?.map((item) => (<Swiper.Item key={item}><img src={item} alt="" /></Swiper.Item>))
        }
      </Swiper>
      <div className="detail-top">
        <div className="info">
          <p className="name">
            <span>{medicineDetail.name}</span>
          </p>
          <p className="size">
            <Tag color="primary">{medicineDetail.prescriptionFlag == 1 ? '处方药' : '非非法药'}</Tag>
            <span>{medicineDetail.specs}</span>
          </p>
          <p className="price">￥{medicineDetail.amount}</p>
        </div>
      </div>
      <div className="pay-space"></div>
      <div className="detail-bottom">
        <div className="info-item">
          <div className="info-title">药品名称</div>
          <div className="info-desc">{medicineDetail.name}</div>
        </div>
        <div className="info-item">
          <div className="info-title">品牌</div>
          <div className="info-desc">{medicineDetail.brand}</div>
        </div>
        <div className="info-item">
          <div className="info-title">功能主治</div>
          <div className="info-desc">{medicineDetail.indicationsFunction}</div>
        </div>
        <div className="info-item">
          <div className="info-title">不良反应</div>
          <div className="info-desc">{medicineDetail.untowardReaction}</div>
        </div>
        <div className="info-item">
          <div className="info-title">禁忌</div>
          <div className="info-desc">{medicineDetail.contraindication}</div>
        </div>
        <div className="info-item">
          <div className="info-title">注意事项</div>
          <div className="info-desc">{medicineDetail.preparation}</div>
        </div>
        <div className="info-item">
          <div className="info-title">有效期</div>
          <div className="info-desc">{medicineDetail.expiration}</div>
        </div>
        <div className="info-item">
          <div className="info-title">执行标准</div>
          <div className="info-desc">{medicineDetail.standard}</div>
        </div>
        <div className="info-item">
          <div className="info-title">批准文号</div>
          <div className="info-desc">{medicineDetail.approvalNo}</div>
        </div>
        <div className="info-item">
          <div className="info-title">生产企业</div>
          <div className="info-desc">{medicineDetail.manufacturer}</div>
        </div>
      </div>
      <SubmitBar left={renderPrice()} right={<Button color="primary" onClick={addtoCart}>加入药箱</Button>}></SubmitBar>
    </div>
  );
};

export default MedicineDetail;